<template>
  <!-- 
    问题：我们不知道什么时候能够拿到max值，但是总归有一刻，会得到一个真正的max值 
    我们可以使用watch属性监听父组件传递过来的max值，不管watch会被触发几次，但是
    最后一次，肯定是一个合法的max数值
  -->
  <div class="mui-numbox" data-numbox-min='1'>
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input id="test" class="mui-input-numbox" type="number" value="1" 
    @change="countChanged" ref="numbox"/>
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>

<script>
  import mui from '../../lib/mui/js/mui.min.js'

  export default {
    data(){
      return {}
    },
    mounted(){
      // 初始化数字选择框组件
      mui(".mui-numbox").numbox()
      //console.log(this.max)
    },
    methods:{
      countChanged() {
        // 每当文本框的数据被修改时候，立即把文本框中的值传递给父组件
        // console.log(this.$refs.numbox.value)
        this.$emit("getcount",parseInt(this.$refs.numbox.value));
      }
    },
    props: ["max"],
    watch:{
      // 属性监听
      max: function(newVal,oldVal){
        //console.log('newval:' + newVal)
        // 使用JS的API设置numbox的最大值
        mui(".mui-numbox").numbox().setOption("max",newVal)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
